/*
    Document   : default
    Created on : 26.02.2012, 22:15:04
    Author     : ecv
    Description:
        Default stylesheet for ecv-ck, just for demonstration.
        you only need to use original css3 for
            display: <value>;
            box-orient: <value>;
            box-align: <value>;
            box-flex: <value>;
            box-ordinal-group: <value>;
            box-sizing: <value>;
        those will be converted to -moz and -webkit.

        I will add additional properties and values as soon as I need them or
        YOU request them

        Will work on this some more.
        When I'm finished with this, you will never need proprietary css ever
        again. Only letters, numbers and dashes (minus sign) are allowed as
        values.
*/

html {
    margin: 0; padding: 0;
    width: 100%;
    height: 100%;
}

body {
    margin: 0; padding: 0;
    width: 100%; max-width: 1440px;
    min-height: 100%;

    display: box;
    box-orient: vertical;
}

body > header {
    height: 4em;
    background-color: #cccccc;
}

body > header > h1 {
    font-size: 2em;
    margin: 0; padding: 0;
}

body > section {
    box-flex: 1;

    display: box;
    box-orient: horizontal;
}

body > section p {
    margin: 0; padding: 0;
}

body > section > section {
    box-flex: 1;
    box-sizing: border-box;
    padding: 5px;
}

body > section > aside {
    width: 120px;
    box-sizing: border-box;
    padding: 5px;
    background-color: #eeeeee;
}

body > footer {
    height: 2em;
    background-color: #cccccc;
}

@media screen and (max-width: 480px) {
    html {
        height: auto;
    }

    body {
        height: auto;
    }

    body > header {
        height: 2em;
    }

    body > header > h1 {
        font-size: 1em;
    }

    body > section {
        box-orient: vertical;
        width: 100%;
    }

    body > section > section {

    }

    body > section > aside {
        width: 100%;
        box-ordinal-group: 2;
    }
}

@media screen and (min-width: 980px) {
    body > header {
        height: 6em;
    }

    body > header > h1 {
        font-size: 3em;
    }

    body > section > aside {
        width: 240px;
    }
}
